<template>
    <div>
        <page-header title="用户列表" describe="没有软删除，请谨慎删除">
            <a-button
                type="primary"
                :size="size"
                style="margin-right: 5px"
                @click="addUser()"
                >注册用户</a-button
            >
        </page-header>
        <a-modal
            v-model:visible="addUserVisible"
            title="注册用户"
            @ok="addUserBtn"
        >
            <a-form
                ref="formRef"
                :model="addform"
                :rules="addrules"
                :label-col="labelCol"
                :wrapper-col="wrapperCol"
            >
                <a-form-item label="昵称" name="nickname">
                    <a-input v-model:value="addform.nickname" />
                </a-form-item>
                <a-form-item ref="name" label="账户名" name="account">
                    <a-input v-model:value="addform.account" />
                </a-form-item>
                <a-form-item label="密码" name="account">
                    <a-input v-model:value="addform.password" />
                </a-form-item>
                <a-form-item label="用户角色">
                    <a-radio-group v-model:value="addform.role">
                        <a-radio value="role_admin">管理员</a-radio>
                        <a-radio value="role_guest">用户</a-radio>
                    </a-radio-group>
                </a-form-item>
            </a-form>
        </a-modal>

        <page-layout>
            <a-table :columns="columns" :data-source="userData">
                <template #headerCell="{ column }">
                    <template v-if="column.key === 'name'">
                        <span>
                            <smile-outlined />
                            Name
                        </span>
                    </template>
                </template>

                <template #bodyCell="{ column, record }">
                    <template v-if="column.key === 'avatar'">
                        <a-avatar :src="record.avatar" />
                    </template>
                    <template v-if="column.key === 'status'">
                        <a-switch
                            v-model:checked="record.status"
                            checked-children="启用"
                            un-checked-children="禁用"
                            @click="updateStatus(record)"
                        />
                    </template>
                    <template v-else-if="column.key === 'action'">
                        <span>
                            <a-button
                                type="primary"
                                :size="size"
                                style="margin-right: 5px"
                                @click="showEditDrawer(record)"
                                ><template #icon> <edit-outlined /> </template
                                >编辑</a-button
                            >
                            <a-popconfirm
                                title="确认删除此用户？"
                                ok-text="确认"
                                cancel-text="取消"
                                @confirm="delUser(record.id)"
                                @cancel="cancel"
                            >
                                <a-button danger :size="size">
                                    <template #icon>
                                        <delete-outlined /> </template
                                    >删除</a-button
                                >
                            </a-popconfirm>
                            <a-button
                                style="margin-left: 5px"
                                danger
                                :size="size"
                                type="primary"
                                @click="showAllotVisible"
                                ><template #icon>
                                    <setting-outlined /> </template
                                >分配角色</a-button
                            >
                        </span>
                    </template>
                </template>
            </a-table>
            <a-drawer
                title="编辑用户"
                :width="720"
                :visible="editVisible"
                :body-style="{ paddingBottom: '80px' }"
                :footer-style="{ textAlign: 'right' }"
                @close="onCloseDrawer"
            >
                <a-form
                    ref="formRef"
                    :model="addform"
                    :rules="addrules"
                    :label-col="labelCol"
                    :wrapper-col="wrapperCol"
                >
                    <a-form-item label="用户Id" name="id">
                        <a-input v-model:value="addform.id" disabled />
                    </a-form-item>
                    <a-form-item label="昵称" name="nickname">
                        <a-input v-model:value="addform.nickname" />
                    </a-form-item>
                    <a-form-item ref="name" label="账户名" name="account">
                        <a-input v-model:value="addform.account" />
                    </a-form-item>
                    <!-- <a-form-item label="密码" name="account">
                    <a-input v-model:value="addform.password" />
                </a-form-item> -->
                    <a-form-item label="用户角色">
                        <a-radio-group v-model:value="addform.role">
                            <a-radio value="role_admin">管理员</a-radio>
                            <a-radio value="role_guest">用户</a-radio>
                        </a-radio-group>
                    </a-form-item>
                </a-form>
                <template #footer>
                    <a-button style="margin-right: 8px" @click="onCloseDrawer"
                        >取消</a-button
                    >
                    <a-button type="primary" @click="editUserBtn()"
                        >确定</a-button
                    >
                </template>
            </a-drawer>
        </page-layout>
        <!-- 分配角色 -->
        <a-modal
            v-model:visible="allotVisible"
            title="分配角色"
            @ok="allotRoleBtn"
        >
            <a-radio-group v-model:value="value" name="radioGroup">
                <a-radio
                    v-for="(item, index) in roleData"
                    :key="index"
                    :value="index"
                    >{{ item.remark }}</a-radio
                >
            </a-radio-group>
        </a-modal>
    </div>
</template>
<script>
import {
    getUserList,
    deleteUser,
    register,
    updateUserStatus,
    editUser,
    getRoleList,
} from '@/api/index.js'
import { SmileOutlined } from '@ant-design/icons-vue'
import { message } from 'ant-design-vue'
import { ref, reactive, toRaw } from 'vue'
const size = 'default'
const columns = [
    {
        title: '用户Id',
        width: 100,
        dataIndex: 'id',
        key: 'id',
    },
    {
        title: '昵称',
        dataIndex: 'nickname',
        key: 'nickname',
    },
    {
        title: '头像',
        dataIndex: 'avatar',
        key: 'avatar',
    },
    {
        title: '账户名称',
        width: 100,
        dataIndex: 'account',
        key: 'account',
    },

    {
        title: '创建时间',
        dataIndex: 'createDate',
        key: 'createDate',
    },
    {
        title: '上次登录',
        key: 'lastLogin',
        dataIndex: 'lastLogin',
    },
    {
        title: '邮箱',
        key: 'email',
        dataIndex: 'email',
    },
    {
        title: '状态',
        key: 'status',
        dataIndex: 'status',
    },
    {
        title: '操作',
        key: 'action',
    },
]
export default {
    components: {
        SmileOutlined,
    },

    setup() {
        const userData = ref([])
        const getData = async () => {
            const { data: res } = await getUserList({
                currentPage: 1,
                pageSize: 100,
            })
            const data = res.data.map((e) => {
                if (e.status == 1) {
                    e.status = true
                } else {
                    e.status = false
                }
                return e
            })
            userData.value = data
        }
        getData()

        /**
         * 删除功能
         */

        const cancel = (e) => {
            console.log(e)
        }
        const delUser = async (id) => {
            const { data: res } = await deleteUser(id)
            const { msg, code } = res
            if (code == 200) {
                message.success('删除用户成功')
                getData()
                return
            }
            return message.error(msg)
        }

        /**
         * 编辑功能
         */
        const form = reactive({
            name: '',
            url: '',
            owner: '',
            type: '',
            approver: '',
            dateTime: '',
            description: '',
        })

        const visible = ref(false)

        const onClose = () => {
            visible.value = false
        }

        /**
         * 新增用户
         */
        const addUserVisible = ref(false)
        const addUser = () => {
            addUserVisible.value = true
        }
        const addUserBtn = () => {
            formRef.value
                .validate()
                .then(async () => {
                    const res = await register(toRaw(addform))
                    const { code, msg } = res.data
                    if (code == 200) {
                        message.success('添加用户成功')
                        getData()
                        return
                    }
                    message.error(msg)
                })
                .catch((error) => {
                    console.log('error', error)
                })
            addUserVisible.value = false
        }

        const formRef = ref()
        const addform = reactive({
            id: '',
            account: '',
            password: '',
            nickname: '',
            role: 'role_guest',
        })
        const addrules = {
            account: [
                {
                    required: true,
                    message: '请输入账户名',
                    trigger: 'blur',
                },
            ],
            password: [
                {
                    required: true,
                    message: '请输入密码',
                    trigger: 'blur',
                },
            ],
            nickname: [
                {
                    required: true,
                    message: '请输入昵称',
                    trigger: 'blur',
                },
                {
                    min: 2,
                    max: 5,
                    message: '长度为2到5',
                    trigger: 'blur',
                },
            ],
        }

        const resetForm = () => {
            formRef.value.resetFields()
        }

        /**
         * 编辑用户
         */
        const showEditDrawer = (record) => {
            editVisible.value = true
            const { account, password, nickname, id } = record
            addform.account = account
            addform.password = password
            addform.nickname = nickname
            addform.id = id
        }
        const onCloseDrawer = () => {
            editVisible.value = false
        }
        const editVisible = ref(false)
        const editUserBtn = () => {
            formRef.value
                .validate()
                .then(async () => {
                    const res = await editUser(toRaw(addform))
                    console.log('@@@@', res)
                    const { code, msg } = res.data
                    if (code == 200) {
                        message.success('编辑用户成功')
                        editVisible.value = false

                        getData()
                        return
                    }
                    message.error(msg)
                })
                .catch(() => {
                    message.warning('表单项填写错误')
                })
        }

        /**
         * 更改用户状态
         */
        const updateStatus = async (record) => {
            const { id, status } = record
            const form = {
                id,
                status: status ? 1 : 0,
            }
            const { data: res } = await updateUserStatus(form)
            const { code, msg } = res
            if (code == 200) {
                message.success('更新状态成功')
                return
            }
            message.error(msg)
        }
        /**
         * 分配角色
         *
         */
        const roleData = ref([])
        const getRoleLists = async () => {
            const { data: res } = await getRoleList({
                currentPage: 1,
                pageSize: 100,
            })
            roleData.value = res.data.list
            console.log(res.data.list)
        }
        const allotVisible = ref(false)
        const allotRoleBtn = () => {
            allotVisible.value = false
            message.success('分配角色成功')
        }
        const showAllotVisible = () => {
            getRoleLists()
            allotVisible.value = true
        }
        const value = ref('1')
        return {
            labelCol: {
                span: 4,
            },
            wrapperCol: {
                span: 14,
            },
            value,
            formRef,
            showAllotVisible,
            editVisible,
            columns,
            userData,
            cancel,
            allotVisible,
            delUser,
            showEditDrawer,
            onCloseDrawer,
            allotRoleBtn,
            onClose,
            form,
            visible,
            addUser,
            size,
            addUserVisible,
            addUserBtn,
            addrules,
            resetForm,
            addform,
            editUserBtn,
            updateStatus,
            roleData,
        }
    },
}
</script>
